import Vue from 'vue'
import { debounce } from '@/utils'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
Vue.component('ElImageViewer', ElImageViewer)

const AppEventListener = {
  provide() {
    return {
      _addTagClickHandler: this.addTagClickHandler,
      _removeTagClickHandler: this.removeTagClickHandler
    }
  },
  data() {
    return {
      tagClickHandlers: {
        img: [
          // 全屏查看图片
          (node) => {
            const { currentSrc = '', width, height } = node
            const { enablePreview = 'true' } = node.dataset

            if (
              node.className.indexOf('el-image__preview') == -1 &&
              enablePreview === 'true' &&
              (currentSrc.indexOf('img.xkw.com') != -1 ||
                currentSrc.indexOf('aizj-dev.oss-cn-beijing.aliyuncs.com') != -1 ||
                currentSrc.indexOf('ai-zj.oss-cn-shenzhen.aliyuncs.com') != -1 ||
                currentSrc.indexOf('img.jyeoo.net') != -1)
            ) {
              if (width <= 50 || height <= 50) return

              let ElImageViewer = Vue.extend({
                data: function () {
                  return {
                    elImageViewerVisible: true,
                    elImageViewerList: [currentSrc]
                  }
                },
                template:
                  '<el-image-viewer v-if="elImageViewerVisible" :on-close="() => {elImageViewerVisible = false}" :url-list="elImageViewerList" />'
              })
              let component = new ElImageViewer().$mount()
              document.body.appendChild(component.$el)
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.initEventListener()
  },
  methods: {
    initEventListener() {
      const appDom = document.getElementById('app')

      appDom.addEventListener(
        'click',
        debounce((event) => {
          const node = event.srcElement || event.target
          const { tagClickHandlers } = this

          for (let tagName in tagClickHandlers) {
            if (tagName.toLocaleUpperCase() === node.tagName) {
              const handlers = tagClickHandlers[tagName]

              if (handlers && Array.isArray(handlers)) {
                handlers.forEach((handler) => handler(node))
              }
            }
          }
        }, 300),
        true
      )
    },
    addTagClickHandler(tagName, handler) {
      const { tagClickHandlers } = this
      const handlers = tagClickHandlers[tagName]

      if (handlers && Array.isArray(handlers)) {
        handlers.push(handler)
      } else {
        tagClickHandlers[tagName] = [handler]
      }
    },
    removeTagClickHandler(tagName, handler) {
      const { tagClickHandlers } = this
      const handlers = tagClickHandlers[tagName]

      if (handlers && Array.isArray(handlers)) {
        handlers.forEach((_handler, index) => {
          if (_handler === handler) {
            handlers.splice(index, 1)
          }
        })
      }
    }
  }
}

export default AppEventListener
